<script setup lang="ts">
import { onMounted } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

onMounted(() => {
  // 检查是否是管理员
  const userRole = sessionStorage.getItem('userRole')
  if (userRole !== 'admin') {
    router.push('/404')
  }
})

function logout() {
  // 清除登录信息
  sessionStorage.removeItem('isLoggedIn')
  sessionStorage.removeItem('userRole')
  // 跳转到登录页
  router.push('/')
}

function goToUserManagement() {
  router.push('/admin/users')
}
</script>

<template>
  <div class="admin-home">
    <header class="header">
      <h1>管理员控制面板</h1>
      <button @click="logout" class="logout-btn">退出登录</button>
    </header>
    
    <div class="content">
      <div class="welcome-box">
        <h2>欢迎回来，管理员</h2>
        <p>这是一个动态路由演示系统，您现在正在访问仅限管理员角色可见的页面</p>
      </div>
      
      <div class="menu-box">
        <h3>管理菜单</h3>
        <ul class="menu-list">
          <li @click="goToUserManagement" class="menu-item">
            <span class="item-icon">👥</span>
            <span class="item-text">用户管理</span>
          </li>
          <li class="menu-item">
            <span class="item-icon">🔧</span>
            <span class="item-text">系统设置</span>
          </li>
          <li class="menu-item">
            <span class="item-icon">📊</span>
            <span class="item-text">数据统计</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<style scoped>
.admin-home {
  min-height: 100vh;
  background-color: #f0f2f5;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  background-color: #42b883;
  color: white;
}

.logout-btn {
  padding: 0.5rem 1rem;
  background-color: rgba(255, 255, 255, 0.2);
  border: 1px solid white;
  color: white;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.logout-btn:hover {
  background-color: rgba(255, 255, 255, 0.3);
}

.content {
  max-width: 1200px;
  margin: 2rem auto;
  padding: 0 1rem;
}

.welcome-box {
  background-color: white;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  margin-bottom: 2rem;
}

.welcome-box h2 {
  color: #42b883;
  margin-top: 0;
}

.menu-box {
  background-color: white;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.menu-box h3 {
  margin-top: 0;
  margin-bottom: 1.5rem;
  color: #333;
}

.menu-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1rem;
}

.menu-item {
  display: flex;
  align-items: center;
  padding: 1rem;
  background-color: #f9f9f9;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s;
}

.menu-item:hover {
  background-color: #f0f0f0;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}

.item-icon {
  font-size: 1.5rem;
  margin-right: 1rem;
}

.item-text {
  font-weight: 500;
}
</style> 